<%--
  Function: 
  User: PING
  Date: 2022/10/26

--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.1.min.js"></script>
    <script src="js/register.js"></script>
    <script src="js/comment.js"></script>
    <script>

        $(document).ready(function() {
              $('form').submit(function(event) {
                  event.preventDefault() ;
                  do_register() ;
              }) ;

              $('.add-link').click(function(event) {
                  $('.cover').show() ;
                  event.preventDefault();
              }) ;
              getAllComments() ;
        })
    </script>
    <style>
        body {
            font-size: 14px;
            margin:0 ;
            background: #ccc;
            width:100%;
            height:100%;
        }

        div {
            margin:auto;
            box-sizing: border-box;
        }
        .container {
            margin-top:10px;
            border:1px solid #fff;
            border-radius: 5px;
            width:80%;
            background-color:#fff ;
        }
        .query {
            padding-left:10px;
            float:left;
            margin-top:20px;
            width:100%;
        }

        .tool {
            text-align: left;
            padding-left:10px ;
            margin-top:20px;
            width:100%;
        }
        .tb-content {
            padding-left:10px ;
            margin-top:20px;
            width:100%;
        }
        h2, h3 {
            padding-left:20px;
        }
        .cover {
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,0.6);
            position:fixed;
            top:0;
            left:0;
            display:none;
        }
        .cover-add {
            margin:auto;
            width:50%;
            margin-top:100px;
            background-color:#fff;
            border-radius: 5px;
            padding-top:20px;
        }
        .add-form {
            padding: 20px 20px 50px;
            font-size:16px;
        }
        .add-form input, textarea, select, .input-label {
           margin-top:10px;
        }
        .add-form input[type='button'] {
            margin-top:20px;
            margin-left:50px;
            font-size:16px;
        }
        table
        {
            border-collapse: collapse;
            margin:  auto;
            text-align: center;
            width:90%;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>

</head>
<body>
    <div class="container">
        <h2>AJAX 演示： </h2>
        <div class="query">
            <h3>Ajax 请求:注册</h3>
            <form action="#">
                姓名：<input type="text" name="name" placeholder="请输入姓名"/><br>
                密码：<input type="password" name="pwd" placeholder="请输入密码"/><br>
                兴趣爱好： <input type="checkbox" name="inst" value="run">跑步
                <input type="checkbox" name="inst" value="swim">游泳
                <input type="checkbox" name="inst" value="reading">阅读<br>
                <input type="submit" value="确认"><br>
            </form>
            <span class="register-msg"></span>
        </div>
        <hr>
        <h3>Ajax 请求：表格</h3>
        <div class="tool"><a class="add-link" href="#"> + 新增记录</a></div><br>
        <hr>
        <div class="tb-table">
            <table>
                <thead>
                    <tr>
                        <th width="10%">序号</th>
                        <th width="15%"> 候选人</th>
                        <th width="15%">投票人</th>
                        <th width="20%">评论时间</th>
                        <th width="40%">评论</th>
                    </tr>
                </thead>
                <tbody id="tb-content">
                    <tr >
                        <td width="10%"></td>
                        <td width="15%"></td>
                        <td width="15%"></td>
                        <td width="20%"></td>
                        <td width="40%"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- cover -->
    <div class="cover">
        <div class="cover-add">
            <h3 style="margin-top:10px">新增记录</h3><br>
            <hr>
            <form class="add-form">
                <lable class="input-label"> 候选人： <input type="text" name="candidateName" placeholder="candidate name"/> </lable><br>
                <label class="input-label"> 投票人： <input type="text" name="userName" placeholder="user name"/>
                </label><br>
                <label class="input-label">评价: <br>
                    <textarea name="comment" rows="20" cols="50" >
                    </textarea></label><br>
                <input id="new_comment" type="button" value="提交"/>
            </form>

        </div>


    </div>
    <script>
        $('#new_comment').click(function() {
            addComment() ;
        })

    </script>

</body>
</html>
